<template>
	<view class="uni-tab-bar">
		<scroll-view scroll-x="true" class="uni-swiper-tab" :style="swiperTabStyle">
			<block v-for="(tab, index) in tabBars" :key="tab.id">
				<view class="swiper-tab-list"
				 :class="{ 'active' : tabIndex == index }"
				 @tap="tabTap(index)"
				 :style="swiperTabListStyle"
				 >
					{{ tab.name }}
					<view class="swiper-tab-line"></view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			tabBars: Array,
			tabIndex: Number,
			swiperTabStyle: String,
			swiperTabListStyle: String
		},
		methods: {
			tabTap(index) {
				// this.tabIndex = index
				this.$emit('tabTap', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-tab-list{
		color: #969696;
		font-weight: 600;
	}
	.uni-swiper-tab{
		border-bottom: 1upx solid #EEEEEE;
		.active {
			color: #343434;
			.swiper-tab-line{
				border-top: 6upx solid #FEDE33;
				border-bottom: 6upx solid #FEDE33;
				width: 70upx;
				margin: auto;
				border-radius: 20upx;
			}
		}
	}
</style>
